<template>
  <div class="DhBody">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="起始日期">
        <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker>
      </el-form-item>
      <el-form-item label="截止日期">
        <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">生成班次</el-button>
        <el-button type="success" @click="examine">查看站计划详情</el-button>
      </el-form-item>
    </el-form>
    <div class="Dh_table">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="stationName" label="车站名称"> </el-table-column>
        <el-table-column label="计划生成截止日期">
          <template slot-scope="scope">{{ scope.row.lastDate }}</template>
        </el-table-column>
      </el-table>
    </div>
    <plan-details v-if="dialog" :show="dialog" @hide="isHide" :busDate="busDate" />
  </div>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import planDetails from '../components/planDetails'

const api = $api.dispatch.bus_plan
const sectionApi = $api.dispatch.route_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  components: { planDetails },

  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      form: {
        startDate: '',
        endDate: '',
      },
      tableData: [],
      stationCode: [],
      multipleSelection: [],
      dialog: false,
      busDate: [],
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 车次编号 */
          bus_id: '',
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
    }
  },
  mounted() {
    this.getStation()
  },
  methods: {
    getstartstation(data) {
      const that = this
      if (JSON.parse(localStorage.getItem('userMsg')).userName == 'admin') {
        this.tableData = data
        return
      }
      if (data) {
        sectionApi.getstartstation().then((res) => {
          data.forEach((e) => {
            if (e.stationName == res[0].name) {
              that.tableData = [e]
            }
          })
        })
      } else {
        that.tableData = []
      }
    },

    //获取车站
    getStation() {
      api.getstationsrunbusinfoday().then((res) => {
        // 获取用户当前汽车站
        this.getstartstation(res)
      })
    },
    // 生成班次
    onSubmit() {
      if (this.form.startDate == ' ' || this.form.endDate == '' || this.stationCode.length == 0) {
        this.$message({
          message: '请选择一个车站并且选择日期',
          type: 'warning',
        })
      } else {
        api.createenvbusinfobystation({ stationCode: this.stationCode, startDate: this.form.startDate, endDate: this.form.endDate }).then((res) => {
          this.$message({
            message: '生成成功',
            type: 'success',
          })
          this.getStation()
        })
      }
    },
    // 查询车站计划详情
    examine() {
      if (this.stationCode.length > 1 || this.stationCode.length == 0) {
        this.$message({
          message: '请选择一个车站',
          type: 'warning',
        })
      } else {
        api.getstationrunbusinfoday({ stationCode: this.stationCode[0] }).then((res) => {
          this.busDate = res
          this.dialog = true
        })
      }
    },
    isHide() {
      this.dialog = false
    },
    handleSelectionChange(val) {
      this.stationCode = Array.from(val, ({ stationCode }) => stationCode)
      this.multipleSelection = val
    },
  },
}
</script>
<style>
.DhBody {
  padding: 30px;
}
.Dh_table .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #ebeef5;
  text-align: center !important;
}
</style>
